<template>
    <div>
        <span class="detail-top">

            <p v-if="seckill.order_status == 0">未付款</p>
            <p v-else-if="seckill.order_status == 1">待发货</p>
            <p v-else-if="seckill.order_status == 2">已发货</p>
            <p v-else-if="seckill.order_status == 3">已完成</p>
        </span>
        <div class="common-form detail-logistics">
            <div class="order-info logistics">
                <div v-if="seckill.order_status == 0" class="fu">等待买家付款</div>
				<router-link  :to="{path:'/logistics2/'+ seckill.tracking_number}">
                    <div class="order-info-name logistics2">
                        <a v-if="add.State == 2">在途中</a>
                        <a v-if="add.State == 3">签收</a>
                        <a v-if="add.State == 4">问题件</a>
                        <em class="logistics-time"  v-for="(item, index) in addList" :key="index" v-if="index == 0">{{item.AcceptTime}}</em>
                    </div>
                    <div class="order-info-add">
                        <!-- <label>地址：</label> -->
                        <span class="logistics2"  v-for="(item, index) in addList" :key="index" v-if="index == 0">{{item.AcceptStation}}</span>
                    </div>
                </router-link>
			</div>
        </div>
        <div class="common-form">
			<div class="order-info">
				<!-- <a  class="order-info-a" @click="switchTo('/AddressList')"></a> -->
				<div class="order-info-name">
					{{seckill.addressee}}   {{seckill.number}}
				</div>
				<div class="order-info-add">
					<label>地址：</label>
					<span>{{seckill.province}}{{seckill.area}}{{seckill.city}}{{seckill.address}}</span>
				</div>
			</div>
        </div>
        <div class="common-form">
            <div class="order-shop">
				<p class="order-shop-tel"><i></i>商品信息</p>
				<div class="order-shop-info">
					<img :src="url + seckill.thumbnail">
					<div>
						<p>{{seckill.goods_title}}</p>
						<p class="spec_type">
                            <em v-if="seckill.spec_type == 0"></em>
                            <em v-else>{{seckill.spec_1}} {{seckill.spec_2}}</em>
                        </p>
						<p>
							<a>￥{{seckill.total_fee}}</a>
						</p>
					</div>
				</div>
				<div class="order-shop-more">购买数量 <em>{{seckill.freight}}</em></div>
				<div class="order-shop-more">运费 <em>{{seckill.freight}}</em></div>
				<div class="order-shop-more">实际金额 <em>￥{{seckill.total_fee}}</em></div>
                <div class="btn">
                    <div v-if="seckill.order_status == 0">
                        <a href="#" class="order-more-gary">取消订单</a>
						<a href="#" class="order-more-pink">付款</a>
                    </div>
                    <div v-else-if="seckill.order_status == 1">
                        <a href="#" class="order-more-gary">提醒发货</a>
                    </div>
                    <div v-else-if="seckill.order_status == 2">
                        <a href="#" class="order-more-gary">删除订单</a>
						<a href="#" class="order-more-gary">再次购买</a>
                    </div>
                    <div v-else-if="seckill.order_status == 3">
                        <a href="#" class="order-more-gary">查看物流</a>
						<a href="#" class="order-more-pink">确认收货</a>
                    </div>
                </div>
                
			</div>
        </div>
        <div class="common-tel">
            订单信息
            <div class="common-tel-dot">
                <em></em>
                <em></em>
                <em></em>
            </div>
        </div>
        <div class="common-form">
            <div class="order-shop ">
                <div class="order-shop-more">订单编号 <em class="right">{{seckill.out_trade_no}}</em></div>
				<div class="order-shop-more">创建时间 <em class="right">{{seckill.create_time}}</em></div>
				<!-- <div class="order-shop-more">付款时间 <em>￥120.00</em></div> -->
                <div class="order-shop-more">成交时间 <em class="right">{{seckill.over_time}}</em></div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import { formatDate } from "../../../../static/data.js";
    export default {
        name:'seckillOrderDetail',
        data () {
            return {
                url:'http://api.huiwanzhong365.com',
                seckill:{},
                add:{},
                addList:[],
            }
        },
        methods:{
            detail:function(){
                console.log(this.$route.params.id)
                // /index/merchant/goods/orderDetails
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
					goods_type:0,
					out_trade_no:this.$route.params.id,
                }
                this.$http.post('/index/merchant/goods/orderDetails',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    rs.data.create_time = formatDate(
                    new Date(rs.data.create_time * 1000),
                    "yyyy-MM-dd hh:mm:ss"
                    );
                    this.seckill = rs.data
                    console.log(rs.data.tracking_number)
                    this.logistics(rs.data.tracking_number)
                }).catch(err=>{
                    console.log(err)
                })
            },
            //快递地址
            logistics:function(tracking_number){
                //console.log(this.$route.params.id)
                // /index/merchant/goods/orderDetails
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
					order_type:0,
					LogisticCode:tracking_number
                }
                this.$http.post('/index/merchant/goods/OrderTraces',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    this.add = rs.data
                    this.addList = rs.data.Traces
                    console.log(this.addList)
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            // this.logistics()
            this.detail();
            
        }
    }
</script>

<style scoped>
.fu{
    text-align: center;
    padding: 18px 0 10px 0;
    color: #0050FB;
    font-weight: 600;
}
.spec_type{
    height:20px;
}
.btn{
    text-align: right;
}
.detail-top p{
    padding-top:40px;
    font-size:16px;
    font-weight:600;
}
.detail-top{
    background: #FE2746;
    color: #FFF;
    display: block;
    height: 130px;
    text-align: center;
}
.detail-logistics{
    margin-top: -42px;
}
.logistics{
    padding:10px;
}
.logistics2{
    color:#0050FB;
}
.logistics-time{
    font-size:12px;
    color:#999;
    font-weight: 100;
    float: right;
    margin-right: 15px;
}
.order-more-gary{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(123, 123, 123, 0.08);
    color: #999;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(238, 238, 238, 1);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
.order-more-pink{
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 0.08);
    color: #FC2847;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    display: inline-block;
    padding: 0 10px;
    margin-top: 10px;
    margin-left: 10px;
}
</style>